<template>
  <a-affix :offset-top="top">
    <div class="innerSearchBox">
      <div class="filterContent">
        <a-form :model="filterForm" layout="inline">
          <a-form-item label="选择日期">
            <a-range-picker
              class="formInput"
              :format="'YYYY-MM-DD'"
              value-format="YYYY-MM-DD"
              :allowClear="false"
              v-model:value="filterForm.dateRange"
              @openChange="handleOpenChange"
            /><!-- @change="init" -->
          </a-form-item>
          <a-form-item>
            <a-radio-group
              v-model:value="filterForm.intervalPoints"
              size="default"
              button-style="solid"
            >
              <a-radio :value="24">24点</a-radio>
              <a-radio :value="96">96点</a-radio>
            </a-radio-group>
          </a-form-item>
          <!-- <a-form-item>
            <a-button type="primary" class="filterBtn" @click="handleQuery"
              >查询</a-button
            >
          </a-form-item> -->
        </a-form>
      </div>
      <a-button
        type="primary"
        class="bluePlainBtn adjust"
        @click="adjustBoard"
      >
        <MenuOutlined />
        看板调整
      </a-button>
    </div>
  </a-affix>
  <!-- 市场供需 -->
  <div class="chartContent" v-if="checkShowBoardList('供需情况')">
    <template v-if="marketLoading">
      <div
        style="
          width: 100%;
          height: 600px;
          display: flex;
          justify-content: center;
          align-items: center;
        "
      >
        <a-spin />
      </div>
    </template>
    <template v-else>
      <div class="chartBox">
        <MarketChart
          :handleEmptyTime="handleEmptyTime"
          :handleLine="handleLine"
          :MarketLoadinfoList="MarketLoadinfoList"
          :intervalPoints="intervalPoints"
          :dateRange="dateRange"
          :dataType="dataType"
        />
        <div class="titleRadio">
          <a-radio-group
            v-model:value="dataType"
            size="small"
            fill="#10ffff"
            text-color="#0a1022"
            @change="getMarketLoadinfo"
            button-style="solid"
          >
            <a-radio-button :value="1">日前</a-radio-button>
            <a-radio-button :value="2">实时</a-radio-button>
          </a-radio-group>
        </div>
      </div>
    </template>
  </div>
  <!-- 市场价格趋势 -->
  <div class="chartContent" v-if="checkShowBoardList('价格情况')">
    <template v-if="priceLoading">
      <div
        style="
          width: 100%;
          height: 600px;
          display: flex;
          justify-content: center;
          align-items: center;
        "
      >
        <a-spin />
      </div>
    </template>
    <template v-else>
      <MarketPrice
        :handleEmptyTime="handleEmptyTime"
        :handleLine="handleLine"
        :MarketPriceinfoList="MarketPriceinfoList"
        :intervalPoints="intervalPoints"
        :dateRange="dateRange"
      />
    </template>
  </div>
  <!-- 统调负荷 -->
  <div class="chartContent" v-if="checkShowBoardList('统调负荷')">
    <template v-if="allLoadinfoLoading">
      <div
        style="
          width: 100%;
          height: 600px;
          display: flex;
          justify-content: center;
          align-items: center;
        "
      >
        <a-spin />
      </div>
    </template>
    <template v-else>
      <MarketAllLoadinfoListLine
        :handleEmptyTime="handleEmptyTime"
        :handleLine="handleLine"
        :MarketAllLoadinfoList="MarketAllLoadinfoList"
        :intervalPoints="intervalPoints"
        :dateRange="dateRange"
      />
    </template>
  </div>
  <!-- B类竞价空间 -->
  <div class="chartContent" v-if="checkShowBoardList('B类竞价空间')">
    <template v-if="typeBChartLoading">
      <div
        style="
          width: 100%;
          height: 600px;
          display: flex;
          justify-content: center;
          align-items: center;
        "
      >
        <a-spin />
      </div>
    </template>
    <template v-else>
      <MarketTypeBChart
        :handleEmptyTime="handleEmptyTime"
        :handleLine="handleLine"
        :MarketTypeBChartList="MarketTypeBChartList"
        :intervalPoints="intervalPoints"
        :dateRange="dateRange"
      />
    </template>
  </div>
  <!-- 西电东送电力 -->
  <div class="chartContent" v-if="checkShowBoardList('西电东送电力')">
    <template v-if="WELoading">
      <div
        style="
          width: 100%;
          height: 600px;
          display: flex;
          justify-content: center;
          align-items: center;
        "
      >
        <a-spin />
      </div>
    </template>
    <template v-else>
      <MarketWE
        :handleEmptyTime="handleEmptyTime"
        :handleLine="handleLine"
        :MarketWEChartList="MarketWEList"
        :intervalPoints="intervalPoints"
        :dateRange="dateRange"
      />
    </template>
  </div>
  <!-- A类电源 -->
  <div class="chartContent" v-if="checkShowBoardList('A类电源出力')">
    <template v-if="typeAChartLoading">
      <div
        style="
          width: 100%;
          height: 600px;
          display: flex;
          justify-content: center;
          align-items: center;
        "
      >
        <a-spin />
      </div>
    </template>
    <template v-else>
      <MarketTypeAChart
        :handleEmptyTime="handleEmptyTime"
        :handleLine="handleLine"
        :MarketTypeAChartList="MarketTypeAChartList"
        :intervalPoints="intervalPoints"
        :dateRange="dateRange"
      />
    </template>
  </div>
  <!-- 地方电源出力 -->
  <div class="chartContent" v-if="checkShowBoardList('地方电源出力')">
    <template v-if="localPowerChartLoading">
      <div
        style="
          width: 100%;
          height: 600px;
          display: flex;
          justify-content: center;
          align-items: center;
        "
      >
        <a-spin />
      </div>
    </template>
    <template v-else>
      <MarketLocalPowerChart
        :handleEmptyTime="handleEmptyTime"
        :handleLine="handleLine"
        :MarketLocalPowerChartList="MarketLocalPowerChartList"
        :intervalPoints="intervalPoints"
        :dateRange="dateRange"
      />
    </template>
  </div>
  <!-- 粤港联络线 -->
  <div class="chartContent" v-if="checkShowBoardList('粤港联络线')">
    <template v-if="marketGHChartLoading">
      <div
        style="
          width: 100%;
          height: 600px;
          display: flex;
          justify-content: center;
          align-items: center;
        "
      >
        <a-spin />
      </div>
    </template>
    <template v-else>
      <MarketGHChart
        :handleEmptyTime="handleEmptyTime"
        :handleLine="handleLine"
        :MarketGHChartList="MarketGHChartList"
        :intervalPoints="intervalPoints"
        :dateRange="dateRange"
      />
    </template>
  </div>
  <!-- 天气情况 -->
  <div class="chartContent" v-if="checkShowBoardList('天气情况')">
    <template v-if="weatherLoading">
      <div
        style="
          width: 100%;
          height: 600px;
          display: flex;
          justify-content: center;
          align-items: center;
        "
      >
        <a-spin />
      </div>
    </template>
    <template v-else>
      <div class="chartBox">
        <MarketWeather
          :handleEmptyTime="handleEmptyTime"
          :handleLine="handleLine"
          :MarketWeatherList="MarketWeatherList"
          :intervalPoints="intervalPoints"
          :dateRange="dateRange"
        />
        <div class="selectBox">
          <a-select
            ref="select"
            v-model:value="prov"
            class="formInput"
            placeholder="省份"
            show-search
            optionFilterProp="label"
            :disabled="true"
            style="width: 100px"
            allow-clear
            size="small"
          >
            <a-select-option
              v-for="item in provList"
              :key="item.provId"
              :value="item.provId"
              :label="item.provName"
            >
              {{ item.provName }}
            </a-select-option>
          </a-select>
          <a-select
            ref="select"
            v-model:value="city"
            class="formInput"
            placeholder="城市"
            @change="getMarketWeatherList"
            style="width: 100px; margin-left: 10px"
            size="small"
          >
            <a-select-option
              v-for="item in cityList"
              :key="item.locationId"
              :value="item.locationId"
              :label="item.cityName"
            >
              {{ item.cityName }}
            </a-select-option>
          </a-select>
        </div>
      </div>
    </template>
  </div>

  <!-- 看板弹窗 -->
  <BoardModel
    :allBoardList="BOARD_LIST"
    :visible="bardModelVisible"
    @update:visible="(val) => (bardModelVisible = val)"
    @update:handleOk="(val) => updateBoard(val)"
  />
</template>
<script setup>

import { h } from "vue"
import { MenuOutlined } from "@ant-design/icons-vue"
import { BOARD_LIST } from "@/constants/boardConfig"
import { getAllDate } from "@/utils/common"
import moment from "moment"
import BoardModel from "./components/BoardModel.vue"
import MarketChart from "./components/MarketChart/index.vue"
import MarketPrice from "./components/MarketPrice/index.vue"
import MarketWeather from "./components/MarketWeather/index.vue"
import MarketAllLoadinfoListLine from "./components/MarketAllLoadinfoListLine/index.vue"
import MarketTypeBChart from "./components/MarketTypeBChart/index.vue"
import MarketWE from "./components/MarketWE/index.vue"
import MarketTypeAChart from "./components/MarketTypeAChart/index.vue"
import MarketLocalPowerChart from "./components/MarketLocalPowerChart/index.vue"
import MarketGHChart from "./components/MarketGHChart/index.vue"
const $api = inject("$api")
//看板列表
const filterForm = ref({
  dateRange: [
    moment().subtract(6, "days").format("YYYY-MM-DD"),
    moment().add(1, "days").format("YYYY-MM-DD"),
  ],
  intervalPoints: 24,
})
//市场供需数据
let MarketLoadinfoList = ref({})
const dataType = ref(1)
const marketLoading = ref(false)
const getMarketLoadinfo = async () => {
  marketLoading.value = true
  let params = {
    dataType: dataType.value,
    startTime: filterForm.value.dateRange[0],
    endTime: filterForm.value.dateRange[1],
  }
  let res = await $api.loadinfoMarket(params)
  MarketLoadinfoList.value = res.data
  marketLoading.value = false
}
//市场价格趋势
const priceLoading = ref(false)
const MarketPriceinfoList = ref({})
const getMarketPrice = async () => {
  priceLoading.value = true
  let params = {
    startTime: filterForm.value.dateRange[0],
    endTime: filterForm.value.dateRange[1],
  }
  let res = await $api.priceinfoMarket(params)
  MarketPriceinfoList.value = res.data

  priceLoading.value = false
}
//统调负荷
const allLoadinfoLoading = ref(false)
const MarketAllLoadinfoList = ref({})
const getMarketAllLoadinfoList = async () => {
  allLoadinfoLoading.value = true
  MarketAllLoadinfoList.value = await PubGetList(1)
  allLoadinfoLoading.value = false
}
//B类竞价空间
const typeBChartLoading = ref(false)
const MarketTypeBChartList = ref({})
const getMarketTypeBChartList = async () => {
  typeBChartLoading.value = true
  MarketTypeBChartList.value = await PubGetList(2)
  typeBChartLoading.value = false
}
//西电东送
const WELoading = ref(false)
const MarketWEList = ref({})
const getMarketWEList = async () => {
  WELoading.value = true
  MarketWEList.value = await PubGetList(3)
  WELoading.value = false
}
//A类电源
const typeAChartLoading = ref(false)
const MarketTypeAChartList = ref({})
const getMarketTypeAChartList = async () => {
  typeAChartLoading.value = true
  MarketTypeAChartList.value = await PubGetList(4)
  typeAChartLoading.value = false
}
//地方电源出力
const localPowerChartLoading = ref(false)
const MarketLocalPowerChartList = ref({})
const getMarketLocalPowerChartList = async () => {
  localPowerChartLoading.value = true
  MarketLocalPowerChartList.value = await PubGetList(5)
  localPowerChartLoading.value = false
}
//粤港联络线
const marketGHChartLoading = ref(false)
const MarketGHChartList = ref({})
const geMarketGHChartLoadingList = async () => {
  marketGHChartLoading.value = true
  MarketGHChartList.value = await PubGetList(6)
  marketGHChartLoading.value = false
}
//天气情况
const provList = ref([])
const prov = ref(0)
const getProvList = async () => {
  let res = await $api.baseProvinceTree()
  provList.value = res.data

  prov.value =
    provList.value.find((item) => item.provName.indexOf("广东") > -1).id ||
    440000

  getCityList(prov.value)
}

const cityList = ref([])
const city = ref(null)
const getCityList = async (id) => {
  let res = await $api.citylist({ provId: id })
  cityList.value = res.data
  cityList.value.push({
    cityName: "全省平均",
    locationId: null,
  })
}
const weatherLoading = ref(false)
const MarketWeatherList = ref({})
const getMarketWeatherList = async () => {
  weatherLoading.value = true
  let params = {
    provId: prov.value,
    locationId: city.value,
    startDate: filterForm.value.dateRange[0],
    endDate: filterForm.value.dateRange[1],
  }
  let res = await $api.templist(params)
  MarketWeatherList.value = res.data
  weatherLoading.value = false
}
// 日期变化
const handleOpenChange = async (e) => {
  if (!e) {
    init()
  }
}
// 更新看板数据
const allBoardList = ref(BOARD_LIST)

const updateBoard = (val) => {
  allBoardList.value = JSON.parse(JSON.stringify(val))
  init()
}
const intervalPoints = ref(null)
const dateRange = ref(null)
const init = async () => {
  intervalPoints.value = filterForm.value.intervalPoints
  dateRange.value = filterForm.value.dateRange
  for (let i = 0; i < allBoardList.value.length; i++) {
    const board = allBoardList.value[i]
    if (board.isShow) {
      switch (board.name) {
        case "供需情况":
          await getMarketLoadinfo()
          break
        case "价格情况":
          await getMarketPrice()
          break
        case "天气情况":
          await getMarketWeatherList()
          break
        case "统调负荷":
          await getMarketAllLoadinfoList()
          break
        case "B类竞价空间":
          await getMarketTypeBChartList()
          break
        case "西电东送电力":
          await getMarketWEList()
          break
        case "A类电源出力":
          await getMarketTypeAChartList()
          break
        case "地方电源出力":
          await getMarketLocalPowerChartList()
          break
        case "粤港联络线":
          await geMarketGHChartLoadingList()
          break
      }
    }
  }
}
//初始化
const loading = ref(false)
const handleQuery = async () => {
  // 处理查询逻辑
  loading.value = true

  loading.value = false
}
//负荷信息公共请求
const PubGetList = async (type) => {
  let params = {
    loadType: type,
    startTime: filterForm.value.dateRange[0],
    endTime: filterForm.value.dateRange[1],
  }
  let res = await $api.loadinfoAllListMarket(params)
  return res.data
}
// 看板弹窗
const bardModelVisible = ref(false)
const adjustBoard = () => {
  bardModelVisible.value = true
}
// 检查是否打开当前曲线
const checkShowBoardList = (name) => {
  let target = allBoardList.value.find((item) => item.name === name)
  if (target) {
    return target.isShow
  } else {
    return false
  }
}

//处理空时间公共函数
const handleEmptyTime = (list = [], addStr1, addStr2) => {
  let timeList = getAllDate(
    filterForm.value.dateRange[0],
    filterForm.value.dateRange[1]
  )
  timeList.map((item) => {
    const target = list.find(
      (v) => v.dateTime === item || v.dateTime.split(" ")[0] === item
    )
    if (!target) {
      list.push({
        dateTime: item,
        [addStr1]: new Array(24).fill(""),
        [addStr2]: new Array(96).fill(""),
      })
    } else {
      if (!target.hasOwnProperty(addStr1)) {
        target[addStr1] = new Array(24).fill("")
      }
      if (!target.hasOwnProperty(addStr2)) {
        target[addStr2] = new Array(96).fill("")
      }
    }
  })
  list.sort((a, b) => {
    return b.dateTime > a.dateTime ? -1 : 1
  })
  return list
}
//数据处理公共函数
const handleLine = (list = [], handleArr) => {
  let newArr = list.reduce((all, item) => {
    return [...all, ...item[handleArr]]
  }, [])

  return newArr
}
onMounted(async () => {
  await getProvList()
  init()
})
</script>
<style lang="less" scoped>
.innerSearchBox {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: #141414;
  .adjust {
    margin-right: 20px;
    border-radius: 0;
  }
}
.filterContent {
  .ant-form-item {
    margin-bottom: 0 !important;
  }
  .filterBtn {
    margin-right: 10px;
    &:last-child {
      margin-right: 0;
    }
  }
}
.chartContent {
  margin-top: 20px;
  background: #141414;
  padding: 20px;
  border-radius: 4px;
  .chart {
    width: 100%;
    height: 600px;
  }
}
.chartBox {
  position: relative;
  .selectBox {
    position: absolute;
    top: 0;
    right: 10%;
  }
  .titleRadio {
    position: absolute;
    top: 0;
    right: 0;
  }
}
</style>
./components/MarketLocalPowerChart1/index.vue
./components/MarketLocalPowerChart1/index.vue./components/MarketLocalPowerChart/index.vue
